<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市联动</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <select v-model="provice" @change="changeCity();changeCounty()">
            <option value="" disabled>---请选择---</option>
            <option v-for="(item,index) in arr" :value="item.name" >{{item.name}}</option>
        </select>
        <select v-model="city" @change="changeCounty">
            <option value="" disabled>---请选择---</option>
            <option v-for="(item,index) in cityArr" :value="item.name" >{{item.name}}</option>
        </select>
        <select v-model="county">
            <option value="" disabled>---请选择---</option>
            <option v-for="(item,index) in countyArr" :value="item.name">{{item.name}}</option>
        </select>
        <p>省份：{{provice}}</p>
        <p>城市：{{city}}</p>
        <p>区域：{{county}}</p>



    </div>
    <script src="./items.js"></script>
    <script>
        /* 
        1.省市区三级联动
        */
        var app = new Vue({
            el: "#app",
            data: {
                flag: true,

                provice: "",
                city: "",
                county: "",

                cityArr: [],
                countyArr: [],

                arr: [
        
                    {
                        name: "江苏省",
                        sub: [

                            {
                                name: "苏州市",
                                sub: [
                
                                    { name: "吴中区" },
                                    { name: "姑苏区" }
                                ]
                            },
                            {
                                name: "南京市",
                                sub: [
                                    { name: "秦淮区" },
                                    { name: "玄武区" }
                                ]
                            },
                        ]
                    },

                    {
                        name: "浙江省",
                        sub: [
                            {
                                name: "杭州市",
                                sub: [
                                    { name: "上城区" },
                                    { name: "西湖区" }
                                ]
                            },
                            {
                                name: "宁波市",
                                sub: [
                                    { name: "镇海区" },
                                    { name: "江北区" }
                                ]
                            },
                        ]
                    },

                ],

            },

            methods: {
                changeCity() {
                    this.arr.forEach((item, index) => {
                        if (item.name === this.provice) {
                            this.cityArr = item.sub;
                        }
                    });
                    this.city=this.cityArr[0].name;

                },
                changeCounty() {
                    this.cityArr.forEach((item, index) => {
                        if (this.city === item.name) {
                            this.countyArr = item.sub;
                        }
                    })
                    this.county=this.countyArr[0].name;
                }
            },
        });
    </script>
</body>

</html>